<template>
  <div>
    <div class="user_rz aui-bg-f aui-padded-b-15 aui-padded-l-15" v-if="!isLoading" v-cloak>
        <div class="aui-content aui-margin-b-15">
            <ul class="aui-list aui-form-list" style="background-image: none">
                <li class="aui-list-item aui-padded-t-15 aui-margin-r-15 aui-border-b">
                    <van-row>
                        <van-col span="4" class="aui-list-item-label-icon aui-text-3 aui-font-weight aui-ftn14">
                            姓名
                        </van-col>
                        <van-col span="20" class="aui-list-item-input aui-text-9 aui-padded-l-15  aui-text-right aui-ftn14">
                            <input type="text" name="rz" v-model.trim="user.realname" placeholder="请填写" class="aui-text-right aui-ftn14" v-text="user.name" v-if="!is_rz" v-cloak>
                            <span class="aui-text-c" v-if="is_rz" v-cloak>{{user.realname}}</span>
                        </van-col>
                    </van-row>
                </li>

                <li class="aui-list-item aui-margin-t-15 aui-margin-r-15 aui-border-b">
                    <van-row>
                        <van-col span="6" class="aui-text-3 aui-font-weight aui-ftn14">
                            身份证号
                        </van-col>
                        <van-col span="18" class="aui-text-right aui-ftn14">
                            <input type="text" name="rz" v-model.trim="user.idcard" placeholder="请填写" class="aui-text-right aui-ftn14" v-if="!is_rz" v-cloak>
                            <span class="aui-text-c" v-if="is_rz" v-text="user.idcard" v-cloak></span>
                        </van-col>
                    </van-row>
                </li>

                <li class="aui-list-item aui-margin-t-15 aui-ftn14 aui-margin-r-15 aui-border-b">
                    <van-row>
                        <van-col span="4" class="aui-text-3 aui-font-weight">
                            QQ
                        </van-col>
                        <van-col span="20" class="aui-text-right">
                            <input type="text" name="rz" v-model.trim="user.qq" placeholder="请填写" class="aui-text-right" v-if="!is_rz" v-cloak>
                            <span class="aui-text-c" v-if="is_rz" v-text="user.qq" v-cloak></span>
                        </van-col>
                    </van-row>
                </li>
                <!-- <li class="aui-list-item aui-margin-t-15 idcard">
                    <div class="aui-list-item-inner idcard-list">
                        <div class="aui-list-item-label-icon aui-text-3 aui-font-weight">
                            身份证照片
                        </div>
                        <div class="aui-text-right idcard_img">
                            <div class="img_cont aui-text-center" >
                              <van-uploader :after-read="afterRead" v-if="!is_rz">
                                <div class="aui-ftn14 aui-text-7 aui-text-center" v-if="!user.image">上传</div>
                                <div class="img" :style="{backgroundImage:'url(' + user.image + ')'}" v-if="user.image"  v-lazy="user.image"></div>
                              </van-uploader>
                              <div class="img" :style="{backgroundImage:'url(' + user.image + ')'}" v-if="user.image && is_rz" @click="fnPreview(user.image, 0)"  v-lazy="user.image"></div>
                            </div>
                            <div class="img_desc" v-if="!is_rz" v-cloak>
                                <img :src="idcard_image" alt=""  @click="fnPreview(idcard_image, 0)" v-lazy="idcard_image"/>
                            </div>
                        </div>

                    </div>
                </li> -->
            </ul>
        </div>

        <div class="aui-margin-r-15">
            <div class="aui-ftn16 aui-margin-t-15 aui-text-center aui-text-8 aui-padded-15" v-if="is_rz" v-cloak>{{check == 1 ? '实名认证通过！' : '实名认证审核中'}}</div>
            <div class="aui-bg-red aui-text-f aui-text-center submit_btn aui-ftn16" v-else  v-cloak @click="fnSubmit">提交认证</div>
        </div>

        <div v-if="!is_rz" v-cloak>
            <div class="tag aui-ftn12 aui-text-7 aui-padded-t-10">
                1、为净化试用环境，防止试客恶意行为，请如实填写！
            </div>
            <div class="tag aui-ftn12 aui-text-7 aui-padded-t-10">2、本平台保证您个人隐私，不作任何其它用途和泄露！
            </div>
            <div class="tag aui-ftn12 aui-text-red aui-padded-t-10">
                3、4月份实名认证没有上传身份证的试客，需重新认证！
            </div>
        </div>
    </div>
  </div>
</template>
<script>
  import User from '../../../service/user.js'
  export default {
    name: 'Rz',
    data () {
      return {
        is_rz: false,
        isLoading: true,
        idcard_image: '',
        image_file: '',
        check: 0,
        user: {
            uid: '',
            realname: '',
            idcard: '',
            qq: '',
            isToken: true
        }
      }
    },
    mounted () {
      this.user.uid = this.$store.state.uid;
      // this.idcard_image = this.utils.ossUrl + '/assets/img/realauth.png';
      this.init();
    },
    methods: {
      init: function() {
        User.fnGetRzData({uid: this.$store.state.uid, isToken: true}).then(res => {
		  this.isLoading = false;
          if (res) {
              if (res.status) {
                  this.user = res.data;
                  if (res.data.id) this.user.id = res.data.id;
                  this.fnCheckStatus(res.data);
                  if (res.data.status == 2) {
                    this.$dialog.alert({
                      message: '注意：实名认证审核不通过，原因：'+res.data.reason+',请重新提交认证！'
                    });
                  }
              } else {
                this.is_rz = false;
              }
          }
        })
      },
    //   // 预览图片
    //   fnPreview: function(path) {
    //       this.utils.fnPreviewPic([path])
    //   },
	  // afterRead(file) {
	  //     //判断图片的大小，单位是字节 
	  //     if (file.file.size > 3 * 1024 *1024) {
		// 	  let vm = this;
		// 	  this.utils.fnChangeFile(file, {w: 200, h : 300}, function(res) {
		// 		  vm.fnUpload(res)
		// 	  }) 
	  //     } else {
	  //         // 符合大小的，直接上传
	  //         this.fnUpload(file)
	  //     }
	  // },
	  // fnUpload: function(file) {
	  //   if (file) {
	  //     this.user.image = file.content;
    //     this.image_file = file.file;
	  //   }
	  // },
      fnCheck: function() {
          //大陆身份证号码校验
          var isMatch = this.user.idcard.match(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/);

          //香港身份证号码校验
          //开头一位或两位大写字母，然后接上6-10位数字，最后一位数字或字母校验
          var isMatchHongKong = this.user.idcard.match(/^[A-Z]{1,2}[0-9]{6,10}[0-9A-Z]$/);

          //澳门身份证号码校验
          //开头数字1或者5或者7，然后接上6位数字，再接上一位数字或者大写字母校验
          var isMatchAoMen = this.user.idcard.match(/^[1|5|7][0-9]{6}[0-9A-Z]$/);

          //台湾身份证号码校验
          //开头一位小写或者大写字母，接上9位数字
          var isMatchTaiWan = this.user.idcard.match(/^[a-zA-Z][0-9]{9}$/);

          if (!this.user.realname) {
              this.utils.fnMsg('姓名不能为空！');
              return false;
          } else if (!this.user.idcard) {
              this.utils.fnMsg('身份证不能为空！');
              return false;
          } else if (!isMatch && !isMatchHongKong && !isMatchAoMen && !isMatchTaiWan) {
              this.utils.fnMsg('身份证格式不正确！');
              return false;
          } else if (!this.user.qq) {
              this.utils.fnMsg('QQ不能为空！');
              return false;
          } else {
              return true
          }
      },
      fnSubmit: function() {
        let _param = {}
          if (this.fnCheck()) {
            // Object.assign(_param, this.user);
            // _param.image = this.image_file ? this.image_file : this.user.image; 
            //   let param = new FormData() // 创建form对象
            //   for (var i in _param) {
            //     param.append(i, _param[i]) // 添加form表单中其他数据
            //   }
              if (this.user.id) {
                User.realauthEdit(this.user).then(res => {
                  if (res) {
                    this.utils.fnMsg(res.msg)
                    this.init()
                  }
                })
              } else {
                User.fnEditRz(this.user).then(res => {
                  if (res) {
                    this.utils.fnMsg(res.msg)
                    this.init()
                    }
                })
              }
            
          }
      },
      fnCheckStatus (data) {
        let {id, status} = data;
        this.check = status;
        this.is_rz = (status == 2 || !id) ? false : true;
        this.$store.commit('ADD_RZ', status ? true : false)
      }
    }
  }
</script>
<style lang="scss">
  div.user_rz {
    li.idcard {
      height: 80px;
    }
    li {
      height: 50px;
      line-height: 50px;
      input {
        height: 50px;
        line-height: 50px;
        border: 0;
        background-color: transparent!important;
      }
    }
    div.submit_btn {
      height: 50px;
      line-height: 50px;
    }
    .img_desc img {
      width: 80px;
  }
  .img_cont {
      width: 80px;
      height: 80px;
      line-height: 80px;
      background-color: #f2f2f2;
  }
  .img_cont .img {
      width: 80px;
      height: 80px;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  .idcard-list {
      padding-right: .375rem!important;
      padding-bottom: .375rem!important;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
  } 
  .idcard_img {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      align-items: center;
  }  
  }
   
</style>
